<template>
  <div class="content">
    <div id="mountNode"></div>
    <div id="minimapDiv" class="minimapDivCon"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6'
import data from '@/assets/node.json'
export default {
  data() {
    return {
      data: null,
      graph: null,
    }
  },
  mounted() {
    this.data = data
    // this.data = JSON.parse(data)
    console.log(this.data)
    const minimap = new G6.Minimap({
      container: document.getElementById('minimapDiv'),
      size: [160, 120],
    })
    this.graph = new G6.Graph({
      modes: {
        default: ['drag-canvas', 'scroll-canvas', 'drag-node'],
      },
      scroller: {
        enabled: true,
        pannable: true,
        pageVisible: true,
        pageBreak: false,
      },
      mousewheel: {
        enabled: true,
        modifiers: ['meta'],
        guard(t, e) {
          console.log('mousewheel', e)
          if (e.altKey) {
            // 当按下 alt 键时，忽略所有滚动事件
            return false
          }
          return true
        },
      },

      plugins: [minimap],
      container: 'mountNode',
      width: 800,
      height: 700,
      fitView: true,
      fitViewPadding: [20, 40, 50, 20],
      layout: {
        // type: 'dagre',
        begin: [0, 0],
        rankdir: 'LR',
        align: 'DL',
        // preventOverlapPadding: 10,
      },
      defaultNode: {
        size: 30,
        labelCfg: {
          position: 'top',
          style: {
            fill: '#ccc',
            textAlign: 'center',
            fontStyle: 'normal',
          },
        },
        style: {
          cursor: 'default',
        },
      },
      defaultEdge: {
        // type: 'polyline',
        // 其他配置
        style: {
          lineWidth: 1.5,
          // ... 其他样式属性
        },
        labelCfg: {
          autoRotate: true,
        },
      },
    })
    this.render()
  },
  methods: {
    render() {
      // 读取数据
      this.graph.data(this.data)
      // 渲染图
      this.graph.render()
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  width: 800px;
  height: 700px;
  #mountNode {
    border: 1px solid #ccc;
    width: 800px;
    height: 700px;
  }
  #minimapDiv {
    border: 1px solid #ccc;
    width: 160px;
    height: 120px;
    position: absolute;
    bottom: 5px;
    right: 5px;
  }
}
</style>
